<template>
    <div class="mr-root">
        <public-header>
            <i slot="icon" class="icon-chevron-left" @click="change"></i>
            <p slot="text" class="title">vue.js中文社区</p>
        </public-header>
        <div class="mr-content">
            <div class="list-top">
                <div class="list-title">{{list.title}}</div>
                <div class="list-content" v-html="list.content"></div>
                <p class="text-count">
                    <i class="icon-eye-open"></i><span>{{list.visit_count}}  </span>
                    <i class="icon-comment-alt"></i><span>{{list.reply_count}}  </span> 
                    <span class="classify"> 来自：{{list.tab | exchange}}</span>
                    <span class="collection span1" @click="shoucang" v-if="show">加入收藏</span>
                    <span class="collection span2" @click="shoucang" v-if="!show">取消收藏</span>                    
                </p>
            </div>
            <div class="center">
                <div class="replies-count">{{list.replies.length}}个留言</div>
                <router-link :to="'/myanswer/'+list.id">
                    <div class="reply-message" >我要留言</div>
                </router-link>
                
                <div class="clear"></div>
            </div>
            <div class="list-reply">
                <list-item v-for="every in list.replies" :list="list" :l="every"></list-item>
            </div>
            <back-top></back-top>
        </div>       
    </div>
</template>

<script>
    import PublicHeader from '../components/Header'
    import BackTop from '../components/BackTop'
    import ListItem from '../components/ListItem'
    export default{
        data(){
            return{
                list:{},
                show:true,
            }
        },
        components:{
            PublicHeader,BackTop,ListItem
        },
        methods:{
            change(){
                this.$router.go(-1)
            },
           shoucang(){
                var accesstoken=localStorage.getItem('accesstoken')
                var data='accesstoken='+accesstoken+'&topic_id='+this.list.id
                if(this.show&&accesstoken){
                     this.axios.post('/vueapi/v1/topic/collect',data)
                    .then(data=>{
                        // console.log(data)
                        this.show=false
                    })
                }else if(!this.show&&accesstoken){
                    this.axios.post('/vueapi/v1/topic/de_collect',data)
                    .then(data=>{
                        this.show=true
                    })
                }
                if(!accesstoken){
                    this.$router.push('/login')
                }
           }
        },
        created(){
            var topicId
            this.axios.get(`/vueapi/v1/topic/${this.$route.params.id}`)
            .then(data=>{
                var list=this.list=data.data.data
                //console.log(list)
                topicId=list.id
                console.log(topicId)
            })

            var k=0
            var loginname=localStorage.getItem('loginname')  
            this.axios.get('/vueapi/v1/user/'+loginname)
            .then(data=>{
                var collect=this.collect=data.data.data.collect_topics
                for(var i=0;i<collect.length;i++){
                    if(topicId==collect[i].id){
                        k++
                    }
                }
                if(k==0){
                    this.show=true
                }else{
                    this.show=false
                }
                console.log(collect)
            })
            .catch(err=>{
                console.log(err)
            })
        }
    }
</script>

<style scoped>  
    .text-count{
        font-size: 16px;
        border-top: 1px solid #e3e4e5;
        /*box-shadow: 0 -2px 10px rgba(0,0,0,.2);*/
        padding: 20px 0;
    }
  .icon-chevron-left{
        font-size: 18px;
        margin-left: 20px;
        color: #fff;
    }
    .icon-eye-open,.icon-comment-alt{
        color: #0e77e4;
    }
  .mr-content{
      padding-top: 44px;
  }
  .list-title{
    font-size: 18px;
    margin-bottom: 10px; 
  }
  .list-content{
      margin-bottom: 10px;
      color: #333;
  }
 .list-top{
     box-shadow: 0 1px 25px rgba(0,0,0,.2);
     padding: 15px;
     padding-bottom:0;
 }
 .center{
     padding: 10px 15px 0 15px;
     font-size: 16px;
 }
 .replies-count{
     float: left;
 }
 .reply-message{
    float: right;
    border: 1px solid #0e77e4;
    color: #0e77e4;
    border-radius: 5px;
    padding: 2px 10px;
 }
 .collection{
     width: 100px;
     
     border-radius: 5px;
     padding: 2px 10px;
     margin-left: 80px;
 }
 .span2{
    color: #fff;
    background: #ccc;
 }
 .span1{
    color: #fff;
    background: #0e77e4;
 }
 .list-reply{
     box-shadow: 0 -1px 25px rgba(0,0,0,.2);  
 }
 .classify{
     font-size: 14px;
 }
</style>